<template>
    <el-table :data="configList" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }" stripe border >
        <el-table-column prop="id" type="selection" width="55" fixed="left" />
        <el-table-column prop="name" label="名称" width="120" />
        <el-table-column prop="keyName" label="keyName" width="120" />
        <el-table-column prop="data" label="数据" />
        <el-table-column prop="departmentName" label="备注" width='250' />
        <el-table-column label="操作" fixed="right" width="150">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>

                <el-popconfirm title="您确定要删除吗?" confirm-button-text="确定" cancel-button-text="取消"
                    @confirm="handleDelete(scope.$index, scope.row)">
                    <template #reference>
                        <el-button size="small" type="danger">Delete</el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
    <config ref="drawer" :row="oRow"></config>
</template>
  

<script setup lang="ts">
import { onBeforeMount, ref } from 'vue';
import { getConfigList } from '@/api'
import { IUserList } from '@/types';
import config from "./components/configList.vue"

let configList = ref<IUserList[]>([]);
let drawer = ref(null);
let oRow = ref(null);
onBeforeMount(async () => {
    let { data: { data: { list } } } = await getConfigList()
    console.log(list);
    configList.value = list

})
const handleEdit = (index: number, row: any) => {
    console.log(index, row);

    console.log(drawer);
    oRow.value = { ...row };
    drawer.value.visible = true;
};
const handleDelete = (index: number, row: any) => {
    console.log(index, row);
};
</script>

<style lang="scss" scoped></style>